import {useState} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {Button, Dropdown, Layout, message, Space, Breadcrumb, type MenuProps, Switch} from 'antd';
import {MenuFoldOutlined, MenuUnfoldOutlined, DownOutlined, ArrowLeftOutlined} from "@ant-design/icons";
import {useLocation, useNavigate} from "react-router-dom"

const {Header} = Layout
import {getCurrentRoute} from '@/utils/Menu.ts'
import {changeCollapsed, changeUserInfo, changeUserToken} from '@/store/userSlice';

const items: MenuProps['items'] = [
    {
        label: '退出登录',
        key: 'loginOut',
    },
];

const HeaderCom = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate()

    const {userInfo, collapsed} = useSelector(state => state.userSlice)
    // 当前路由
    const {pathname} = useLocation()
    const location = getCurrentRoute(pathname);
    const onClick: MenuProps['onClick'] = ({key}) => {
        switch (key) {
            case 'loginOut':
                dispatch(changeUserToken(null))
                navigate('/', {replace: false})
                navigate('/login')
                break;
            default:
                break;
        }
    };
    const toggleCollapsed = () => {
        dispatch(changeCollapsed(!collapsed))
    };
    const goBack = () => {
        navigate(-1)
    }
    return (
        <Header style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: '0 20px 0 0',
            background: '#fff'
        }}>
            <div style={{display: 'flex', alignItems: 'center'}}>
                <Button
                    type="text"
                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    onClick={toggleCollapsed}
                    style={{
                        fontSize: '16px',
                        width: 64,
                        height: 64,
                    }}
                />
                {location?.hidden ?
                    <Button type="primary" icon={<ArrowLeftOutlined />} size="small" style={{marginRight: 10}}
                            onClick={goBack} /> : null}
                <Breadcrumb style={{fontSize: '18px', display: 'inline-block'}}>
                    <Breadcrumb.Item>{location?.name}</Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <Dropdown menu={{items, onClick}}>
                <span onClick={(e) => e.preventDefault()}>
                    <Space>
                        {userInfo?.showName}
                        <DownOutlined />
                    </Space>
                </span>
            </Dropdown>

        </Header>
    );
};

export default HeaderCom;